<template>
	<!-- 发表评论 -->
  <view class="container">
    <!-- 上传区域 -->
   <u-upload
   	:fileList="fileList6"
   	@afterRead="afterRead"
   	@delete="deletePic"
   	name="6"
   	multiple
   	:maxCount="1"
   	width="250"
   	height="150"
   >
   <view class="opload">
	   <view class="_img">
	   	<image src="../../static/发表评论_slices/上传图片.png"></image>
	   </view>
	   <view class="_text">
	   	添加图视频
	   </view>
   </view>
   </u-upload>

    <!-- 文本输入框 -->
    <view class="textarea-section">
      <u-textarea placeholder="展开说说您的想法吧..." :value.sync="text"></u-textarea>
    </view>

    <!-- 服务信息区域 -->
    <view class="service-section">
      <view class="service-info">
        <image class="service-image" src="../../static/logo.png"></image>
        <view class="service-details">
			<view class="service-details-top">
				<text class="service-title">按摩 脊柱侧弯 正骨调理</text><text class="_text">鲍医师</text>
			</view>
			<view class="">
				<text class="service-subtitle">服务时长：60分钟</text>
			</view>
        </view>
		<view class="number">
			<text class="service-price">¥</text>
			<text class="__text">598</text>
		</view>
      </view>
      <view class="ratings-section">
        <view class="rating-row">
          <text class="_text">描述相符</text>
          <u-rate :value.sync="descriptionRating" max="5" activeColor="#F4B750" size="30"></u-rate>
        </view>
        <view class="rating-row">
          <text class="_text">服务态度</text>
          <u-rate :value.sync="serviceRating" max="5" size="30" activeColor="#F4B750"></u-rate>
        </view>
      </view>
    </view>

    <!-- 按钮区域 -->
    <view class="button-section">
		<view class="btn1">
			<view  @click="onCancel">取消发布</view>
		</view>
		<view class="btn2">
			 <view @click="onSubmit">发布</view>
		</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      descriptionRating: 0,
      serviceRating: 0,
	  fileList6: [],
    };
  },
  methods: {
    onCancel() {
      // 取消发布逻辑
    },
    onSubmit() {
      // 提交发布逻辑
    }
  }
}
</script>

<style lang="less" scoped>
	.opload{
		width: 712rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin-top: 18rpx;
		margin-bottom: 32rpx;
		margin-left: 20rpx;
		._img{
			width: 96rpx;
			height: 74rpx;
			margin: auto;
			margin-top: 56rpx;
			image{
				width: 96rpx;
				height: 74rpx;
			}
		}
		._text{
			width: 712rpx;
			height: 32rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 32rpx;
			color: #202022;
			text-align: center;
			margin-top: 36rpx;
			line-height: 48rpx;
			font-style: normal;
		}
	}

.upload-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250rpx;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.textarea-section {
	width: 750rpx;
	height: 358rpx;
	background: #FFFFFF;
	border-radius: 14rpx 14rpx 0rpx 0rpx;
    margin-bottom: 26rpx;
}

.service-section {
 width: 750rpx;
 height: 358rpx;
 background: #FFFFFF;
 padding-top: 36rpx;
}

.service-info {
  display: flex;
  justify-content: space-between;
  margin-left: 26rpx;
  align-items: center;
  width: 700rpx;
  height: 144rpx;
  background: #F6F6F6;
  border-radius: 20rpx;
  border: 1rpx solid #F2EEEE;
}

.service-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  margin-left: 18rpx;
}
.number{
	margin-top: 72rpx;
	margin-right: 28rpx;
	.service-price {
	  height: 62rpx;
	  font-family: OPPOSans, OPPOSans;
	  font-weight: 600;
	  font-size: 28rpx;
	  color: #C19C55;
	  line-height: 38rpx;
	  text-align: left;
	  font-style: normal;
	}
	.__text{
		font-size: 44rpx;
		color: #C19C55;
		font-weight: 600;
	}
}
.service-details {
	.service-details-top{
		._text{
			width: 120rpx;
			height: 34rpx;
			background: linear-gradient( 270deg, rgba(255,255,255,0) 0%, #EAD4B1 100%);
			border-radius: 6rpx;
			margin-left: 16rpx;
			padding-left: 8rpx;
			font-size: 24rpx;
			color: #9F918B;
		}
	}
  flex: 1;
}

.service-title {
  font-size: 30rpx;
  font-weight: bold;
}

.service-subtitle {
  color: #999;
  font-size: 24rpx;
}

.ratings-section {
  margin-top: 44rpx;
  margin-left: 30rpx;
}

.rating-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 26rpx;
  color: #202022;
  ._text{
	  margin-right: 40rpx;
  }
}

.button-section {
  display: flex;
  justify-content: space-around;
  margin-top: 260rpx;
  .btn1{
	  width: 305rpx;
	  height: 84rpx;
	  border-radius: 14rpx;
	  background-color: #EFEDE9;
	  font-size: 32rpx;
	   line-height: 84rpx;
	  text-align: center;
	  color: #7E807C;
  }
  .btn2{
	  width: 305rpx;
	  height: 84rpx;
	  line-height: 84rpx;
	  border-radius: 14rpx;
	  background-color: #C19C55;
	  color: #FFF;
	  font-size: 32rpx;
	  text-align: center;
  }
}
</style>